<template>
  <div class="allRecomment">
    <recomment-item
      v-for="item in recomment"
      :key="item.id"
      :content="item.content"
      :goodNum="item.goodNum"
      :time="parseInt(item.time)"
      :username="item.realname"
      :avatar="item.avatar"
      :id="item.id"
      @callUser="callUser"
      @researchRecomment="researchRecomment"
    ></recomment-item>
    <transition name="fadeFast">
      <div class="addContent" v-if="showRecomment">
        <div>
          <img :src="avatar" alt />
        </div>
        <textarea
          :disabled="isLogin"
          :class="{ addBorder: isBorder }"
          :placeholder="recommentUser"
          @focus="addBorder"
          @blur="delBorder"
          v-model="newRecomment"
        ></textarea>
        <div class="submitBox">
          <button @click="submitRecomment">添加</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import recommentItem from "./recommentItem";
import Message from "@/components/msg/msg";
import Bus from "../../bus";
import { ref, defineProps, onMounted, computed, onBeforeUnmount, defineEmits } from "vue";
import { useUserStore } from "@/store";
import $axios from "@/http";
import { useRoute, useRouter } from "vue-router";
const $route = useRoute();
const props = defineProps(["commentId"]);
const $store = useUserStore();
onMounted(() => {
  searchAllRecomment();
  Bus.$on("finishChange", (msg: string) => {
    if (msg === "success") {
      researchRecomment();
    }
  });
});

const showMsg = ref<boolean>(false);
const isBorder = ref<boolean>(false);
const recomment = ref<Array<any>>([]);
const newRecomment = ref<string>("");
const recommentUser = ref<string>("");
const showRecomment = ref<boolean>(false);
defineExpose({
  showRecomment,
  recommentUser,
});
const isLogin = computed(() => {
  if (localStorage.LoginToken) {
    return false;
  } else {
    return true;
  }
});
const avatar = computed(() => $store.getters.user.avatar);

const researchRecomment = () => {
  searchAllRecomment();
};
const callUser = (username: string) => {
  showRecomment.value = !showRecomment.value;
  recommentUser.value = "@" + username;
};
const addBorder = () => {
  isBorder.value = true;
};
const delBorder = () => {
  isBorder.value = false;
};
const searchAllRecomment = () => {
  $axios
    .get("/recomment/search", {
      params: {
        blogId: $route.params.id,
        commentId: props.commentId,
      },
    })
    .then((res) => {
      console.log(res);
      if (res.data.error === -1) {
        console.log(res.data.data);

        recomment.value = res.data.data;
      } else {
        recomment.value = [];
      }
    });
};
const submitRecomment = () => {
  if (newRecomment.value !== "") {
    $axios
      .post("/recomment/add", {
        username: $store.user.username,
        content: newRecomment.value,
        blogId: $route.params.id,
        realname: $store.user.realname,
        commentId: props.commentId,
        avatar: $store.user.avatar,
      })
      .then((res) => {
        if (res.data.error === -1) {
          Message.success("回复成功");
          searchAllRecomment();
          newRecomment.value = "";
          showRecomment.value = false;
        } else {
          Message.error("回复失败");
        }
      });
  }
};
onBeforeUnmount(() => Bus.$off("finishChange"));
</script>

<style lang="scss" scoped>
@import url("../../css/comment/animate.css");
// @media screen and(min-width:765px) {
.allRecomment {
  .addContent {
    display: flex;
    div {
      margin: 0 25px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-top: 5px;
      }
      button {
        outline: none;
        border: 1px solid #333;
        width: 70px;
        height: 30px;
        border-radius: 15px;
        transition: all 0.4s;
        margin-top: 15px;
        &:hover {
          background-color: aqua;
        }
      }
    }
    textarea {
      border-radius: 10px;
      box-sizing: border-box;
      font-size: 15px;
      resize: none;
      width: 100%;
      height: 70px;
      padding: 7px 10px;
    }
  }
}
// }
// @media screen and(max-width: 765px) {
//   .allRecomment {
//     .addContent {
//       margin-top: 5px;

//       div {
//         img {
//           display: none;
//         }
//         button {
//           outline: none;
//           border: 1px solid #333;
//           width: 70px;
//           height: 30px;
//           border-radius: 15px;
//           transition: all 0.4s;
//           margin-top: 5px;
//           &:active {
//             background-color: aqua;
//           }
//         }
//       }
//       textarea {
//         border-radius: 10px;
//         box-sizing: border-box;
//         font-size: 15px;
//         resize: none;
//         width: 100%;
//         height: 70px;
//         padding: 7px 10px;
//       }
//     }
//   }
// }
</style>
